<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>宇浩·星陳·字根练习·v3.3.0</title>
    <style media="screen, print">
        @font-face {
            font-family: 'YuhaoSongti';
            src: url("https://zhuyuhao.com/yuhao/fonts/YuhaoSongti.ttf");
        }

        body {
            font-family: "YuhaoSongti", serif;
        }
    </style>
    <script style="font-family: YuhaoSongti;">
        let root_map = {
            "q": {
                "c": [57664],
                "m": [57832],
                "i": [57974],
                "k": [57987, 57988, 57990, 57991],
                "q": [57989],
                "y": [0x7f8a, 0x2eb7, 0x2eb6], //[58150, 57649, 58142],//58150 57997
                "s": [58077]
            },
            "w": {
                "m": [57464, 57465],
                "w": [57762],
                "r": [57863, 57864, 57865],
                "y": [58048, 58051, 58052],
                "b": [58049, 58050],
                "k": [58082],
                "c": [58083, 58085],
                "j": [58084, 0x4e31/*58143*/]
            },
            "e": {
                "m": [57390, 57391, /*58144*/0x5f51, 57392],
                "r": [57472],
                "j": [57869],
                "s": [57875],
                "f": [57917],
                "z": [57936],
                "h": [58060],
                "i": [58100, 58101, 58102, 58103]
            },
            "r": {
                "w": [57356],
                "g": [57757],
                "k": [57779, 57780, 57781],
                "q": [57916],
                "e": [57953],
                "i": [58112],
                "x": [58113],
                "j": [58124],
                "h": [58126, 58127]
            },
            "t": {
                "s": [57447, 57448],
                "u": [57473, 57474],
                "f": [57799],
                "h": [57806],
                "m": [57826],
                "e": [57837],
                "i": [57840, 57841],
                "w": [58000, 58001],
                "j": [58078]
            },
            "y": { "f": [57398, 57410], "i": [58034, 58036, 58037, 58038, 58039] },
            "u": {
                "q": [57456],
                "z": [57478, 57479],
                "c": [57585, 57586],
                "b": [57587, 57736, 57737, 57738, 57739],
                "s": [57638, 57770, 57771, 57772],
                "l": [57689],
                "f": [57699],
                "j": [57741],
                "w": [57743],
                "m": [57744],
                "h": [57752, 57753, 57754],
                "o": [57873],
                "g": [57876]
            },
            "i": {
                "c": [57355],
                "v": [57730, 57731, 57732],
                "e": [0x4e1a], //[58145],
                "s": [57766, 57767, 57768],
                "m": [57792, 57986],
                "x": [0x7a74], //[58151],
                "r": [57930, 57931, 57932, 57933],
                "h": [57984]
            },
            "o": {
                "s": [57376, 57377, 58093, 58094],
                "j": [57394, 57395],
                "e": [57415],
                "b": [57418],
                "d": [57538, 57547],
                "f": [57545],
                "z": [57807],
                "c": [57827],
                "j": [57952],
                "i": [58031],
                "m": [58035]
            },
            "p": {
                "x": [57450, 0x8980, 0x897e/*58146, 58147*/],
                "g": [57510],
                "y": [57542],
                "c": [57750],
                "z": [57760, 57761, 57765],
                "i": [57763],
                "n": [58061, 58062, 58063],
                "s": [58075]
            },
            "a": {
                "k": [57345, 57346, 57347],
                "l": [57462],
                "m": [57504, 57505, 57506],
                "t": [57793],
                "g": [57844, 57845, 57846, 57847, 57848],
                "j": [58095, 0x353e], // [58095,58148],
            },
            "s": {
                "g": [57546],
                "m": [57549],
                "i": [57578, 58056, 58057],
                "o": [57920, 57923, 57924, 57925],
                "s": [57921, 57922],
                "r": [57943],
                "y": [57972],
                "l": [58087]
            },
            "d": {
                "f": [57449, 57467],
                "j": [57475, 57476, 57488],
                "b": [57477],
                "c": [57550, 0x53c0, 57551], //[57550, 57551, 57369],
                "z": [57584],
                "o": [57677],
                "s": [57678],
                "d": [57679, 57680, 57691, 58134],
                "m": [57644, 57645, 57687],
                "u": [57782],
                "y": [57798],
                "h": [57801],
                "i": [57896, 57897],
                "x": [57902, 57903, 57904],
                "n": [57913, 57914],
                "p": [57979, 57980],
                "g": [58072, 58073],
                "q": [58098, 58099],
                "w": [58135, 58136]
            },
            "f": { "s": [57344, 57975, 57976], "o": [57453, 57454], "i": [57508], "w": [57574], "m": [57575] },
            "g": {
                "i": [57442],
                "u": [57460],
                "h": [57775],
                "z": [57856, 57857, 57858, 57859],
                "p": [57861],
                "q": [57882],
                "g": [58023],
                "n": [58025, 58026],
                "y": [58066, 58067, 58096],
                "w": [58138]
            },
            "h": {
                "z": [57461, 57466],
                "f": [57539],
                "t": [57568, 57569],
                "s": [57571, 57572, 57583],
                "a": [57579],
                "h": [57800, 57802],
                "q": [57888, 57942],
                "k": [57938, 57939, 57940],
                "c": [57945, 0xe472, 57946], // [57945, 57946, 58149]
            },
            "j": {
                "x": [57358, 57359],
                "d": [57365],
                "g": [57443],
                "w": [57536],
                "s": [57577, 57591, 57996],
                "r": [57632, 57633],
                "y": [57634],
                "z": [57636],
                "v": [57682, 57683, 57684],
                "m": [57728],
                "q": [57745, 57746],
                "b": [57747],
                "j": [57748],
                "i": [57871],
                "f": [58074]
            },
            "k": {
                "c": [57360, 57361],
                "z": [57389],
                "v": [57414],
                "w": [57458],
                "g": [57544],
                "i": [57548],
                "l": [57604],
                "a": [57642, 57643, 57955, 57956],
                "d": [57794, 57795],
                "x": [57805],
                "r": [57911],
                "m": [57963, 57964, 57965, 57966, 57967, 57968],
                "j": [58018, 58019],
                "e": [58030],
                "s": [58130]
            },
            "l": {
                "j": [57353],
                "e": [57363],
                "a": [57512],
                "w": [57581],
                "v": [57696, 57697, 57823],
                "c": [57878, 58028, 58029],
                "s": [57906, 57907]
            },
            "x": {
                "i": [57348, 57349, 57350],
                "q": [57482],
                "j": [57580],
                "y": [57825],
                "v": [57867],
                "x": [57895],
                "s": [57899],
                "m": [58117, 58118, 58119]
            },
            "c": {
                "n": [57408],
                "v": [57444],
                "b": [57666],
                "j": [57667],
                "k": [57669, 57670, 57671],
                "e": [57777],
                "c": [57898, 57910],
                "p": [57959, 57960, 57961]
            },
            "v": {
                "s": [57440, 57441],
                "t": [57640],
                "l": [0x91cc],//[57676],
                "v": [57681, 57981],
                "h": [57937],
                "j": [57676], //[57648],
                "x": [58092]
            },
            "b": {
                "o": [57378, 57382, 57381, 57379, 57383],
                "s": [57385, 57386, 57387, 57397],
                "w": [57412, 57413],
                "c": [57590],
                "y": [57993],
                "g": [58021],
                "p": [58027],
                "j": [58079, 58080, 58081],
                "m": [58088]
            },
            "n": {
                "a": [57420, 58016],
                "f": [57511],
                "g": [57576, 57592],
                "s": [57600, 57601, 57602, 57672, 57673, 57674, 57675],
                "b": [57890],
                "c": [57977]
            },
            "m": {
                "d": [57388, 57735],
                "r": [57483],
                "y": [57485],
                "w": [57486],
                "z": [0x8c78], //[57368],
                "c": [57540, 57944],
                "l": [57606, 57607],
                "b": [57824],
                "a": [57842],
                "h": [57893, 57894],
                "m": [57900],
                "g": [57995],
                "q": [58070, 58071],
                "n": [58122, 58123]
            },
        }

        function main() {
            showArea.init();
            userInput.init();
            btnObj.init();
            showArea.next();
        }

        let btnObj = {
            randomObj: null,
            showTip: function () {
                let showEle = document.getElementById("key_hint_checkbox");
                if (showEle.checked) {
                    userInput.ele.setAttribute("placeholder", showArea.currentCh);
                } else {
                    userInput.ele.removeAttribute("placeholder");
                }
            },
            next: function () {
                showArea.next();
            },
            init: function () {

            }

        }

        let showArea = {
            code: 'qwertyuiopasdfghjklxcvbnm',
            randomNum: 25,
            ele: null,
            length: 0,
            currentCh: '',
            currentIndex: 0,

            init: function () {
                showArea.ele = document.getElementById("raw_area");
            },
            next: function () {
                showArea.nextAlpa();

            },
            nextAlpa: function () {
                showArea.clear();
                if (showArea.code.length === 0) {
                    if (document.getElementById("repeat_wrong_checkbox").checked) {
                        userInput.showError();
                    }
                    return
                }
                let r = Math.floor(Math.random() * showArea.randomNum);
                showArea.randomNum--;
                let tmpCh = showArea.code[r];

                showArea.code = showArea.code.substring(0, r) + showArea.code.substring(r + 1);
                showArea.show(tmpCh, root_map[tmpCh]);

                showArea.showCurrent();

            },
            show: function (ch, chars) {
                let count = 0, curCh = '';
                for (let key in chars) {
                    let tmpArr = chars[key];

                    for (let i = 0; i < tmpArr.length; i++) {
                        let item = document.createElement("span");
                        item.innerText = String.fromCharCode(tmpArr[i]);
                        item.setAttribute("key", ch + key);
                        item.setAttribute("code", String.fromCharCode(tmpArr[i]));
                        showArea.ele.appendChild(item)
                        count++;
                        if (curCh == '') {
                            curCh = ch + key;
                        }
                    }
                }
                showArea.length = count;
                showArea.currentIndex = 0;
                showArea.currentCh = curCh;
                btnObj.showTip();
            },
            clear: function () {
                showArea.ele.innerHTML = "";
            },
            showCurrent: function () {
                document.getElementById("currentCh").innerHTML = showArea.currentCh.substring(0, 1).toUpperCase();
            }
        }

        let userInput = {
            errorCode: {},
            init: function () {
                userInput.ele = document.getElementById("user_input");
            },
            showError: function () {
                let count = 0, curCh = '';
                for (let key in userInput.errorCode) {
                    let tmpArr = userInput.errorCode[key];
                    tmpArr.setAttribute('style', 'color: lightgrey;');
                    showArea.ele.appendChild(tmpArr)
                    count++;
                    if (curCh == '') {
                        curCh = tmpArr.getAttribute("key");
                    }
                }
                showArea.length = count;
                showArea.currentIndex = 0;
                showArea.currentCh = curCh;
                btnObj.showTip();
                userInput.errorCode = {};
            },
            ele: null,
            change: function (_this) {
                let val = _this.value;
                if (val.length === 2) {
                    let child = showArea.ele.children;
                    let el = child[showArea.currentIndex];
                    let key = el.getAttribute('key');

                    if (key === val) {
                        el.setAttribute('style', 'color: black;');
                        showArea.currentIndex++;
                        if (showArea.currentIndex >= showArea.length) {
                            showArea.clear();
                            showArea.next()
                        } else {
                            showArea.currentCh = child[showArea.currentIndex].getAttribute('key');
                            document.getElementById("tips_input").innerHTML = child[showArea.currentIndex].getAttribute('code');
                            //document.getElementById("user_input").innerHTML = document.getElementById("user_input");
                            showArea.showCurrent();
                        }
                        btnObj.showTip();
                        document.getElementById("tips_input").innerHTML = child[showArea.currentIndex].getAttribute('code');
                    } else {
                        userInput.errorCode[el.innerText.charCodeAt(0)] = el;
                    }
                    userInput.ele.value = '';
                }
            }

        }

    </script>
    <style>
        html {
            font-family: '宇浩字根', 'TH-Tshyn-P0', 'TH-Tshyn-P1', 'TH-Tshyn-P2', 'TH-Tshyn-P16', '中华书局宋体00平面', 'sim-ch_n5100', 'Times New Roman', Times, serif;
        }

        #raw_area span {
            color: lightgrey;
            font-size: 60px;
        }

        aside {
            text-align: center;
            width: 120px;
            height: 60%;
            background-color: #70abe6;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 125%;
            cursor: default;
        }

        .textarea {
            width: 90%;
            min-height: 300px;
            padding: 8px;
            outline: 0;
            border: none;
            word-wrap: normal;
            overflow-y: visible;
            resize: none;
            border-color: rgba(82, 168, 236, 0.8);
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 16px rgba(82, 168, 236, 1);
        }


        #user_input {
            padding: 5px;
            outline: 0;
            border: 2px solid #a0b3d6;
            border-color: rgba(82, 168, 236, 0.8);
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1), 0 0 16px rgba(82, 168, 236, 0.6);
        }


        #content {
            padding-left: 170px;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-right: 10px;
        }

        #maintop {
            padding-left: 170px;
            line-height: 35px;
        }


        #user_input {
            margin-top: 20px;
            align-self: center;
            height: 80px;
            width: 120px;
            margin-left: 30%;
            align-content: center;
            font-size: 60px;
        }


        #tips_input {
            margin-top: 20px;
            align-self: center;
            height: 80px;
            width: 120px;
            margin-left: 30%;
            align-content: center;
            font-size: 60px;
        }

        .textarea span {
            float: left;
        }
    </style>
</head>

<body onload="main()">
    <div id="maintop">
        宇浩·星陳·字根练习·v3.3.0
        </br>
        原作者: MoGu / 宋天
        </br>
        制作人: 慕名
        </br>
        <input type="checkbox" id="key_hint_checkbox" onclick="btnObj.showTip()" checked>编码提示</input>
        <input type="checkbox" id="repeat_wrong_checkbox" checked> 错误复习</input>
        <!--    <input type="radio" id="radio1" name="random_word" value="1" checked/>-->
        <!--    <label for="radio1">随机字母</label>-->
        <input type="button" onclick="btnObj.next()" value="下一个">
        <div>
            <div style="float: left;">当前字母：</div>
            <div id="currentCh" style="width: 70px;height:70px;font-size: 80px;
    float: left;"></div>
        </div>

        <br>
        <label id="totallabel"></label>
        <label id="speedlabel"></label>
        </br>
    </div>
    <div id="content">
        <div class="textarea" id="raw_area"></div>
        <input id="user_input" oninput="userInput.change(this)" />
        <input id="tips_input" />
    </div>

</body>

</html>
